<script setup lang="ts">
import { updateCarPost } from '@/services/goods.ts';
import type { ApparatusCategory, ExpandparamValueList } from '@/types';

interface PopupListItem {
  goodsName: string;
  goodsImg: string;
  goodsSalesPrice: number;
  goodsExpandparamValueList: ExpandparamValueList[];
  apparatusCategory: ApparatusCategory;
  minimumQuantity: number;
  amount: number;
  cartItemId: string;
  isCombo: string;
  comboItemList: any[];
}

const props = defineProps<{
  popupList: PopupListItem;
}>();
const emit = defineEmits(['update:model-value', 'load-Data']);
const amount = ref(props.popupList.amount);
const onSureClick = async () => {
  const { err } = await updateCarPost({
    amount: amount.value,
    cartItemId: props.popupList.cartItemId,
  });
  if (err) {
    showToast(err);
    return;
  }
  emit('update:model-value', false);
  emit('load-Data');
};
const beforeChange = async (value: any) => {
  if (value < props.popupList.minimumQuantity) {
    showToast(`最小起订量为 ${props.popupList.minimumQuantity}`);
    return false;
  }
  return true;
};
const getCategoryText = (level: any) => {
  if (!props.popupList.apparatusCategory) return '';
  const prefix = level === 1 ? '' : level === 2 ? 'II类医疗器械 / ' : 'III类医疗器械 / ';
  return `${prefix}${props.popupList.apparatusCategory.apparatusCategoryName}`;
};
</script>

<template>
  <div class="popup_box">
    <div class="goods_box">
      <div class="right">
        <van-image :src="popupList.goodsImg?.split(',')[0]" />
        <div class="right_spc">
          <van-text-ellipsis :content="popupList.goodsName" />
          <div class="right_price">
            <div class="goods_price">
              <span>￥</span>
              <span class="price_num">{{ popupList.goodsSalesPrice }}</span>
            </div>
            <van-stepper
              v-model="amount"
              :before-change="beforeChange"
              integer
              :min="popupList.minimumQuantity"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="product">
      <div v-if="popupList.isCombo === 'NO'">
        <div class="product_title">产品信息</div>
        <div class="product-container">
          <div class="product-box">
            <div class="box-left">器械类别</div>
            <div class="box-right">
              {{ getCategoryText(popupList.apparatusCategory?.apparatusCategoryLevel) }}
            </div>
          </div>
          <div
            v-for="field in popupList.goodsExpandparamValueList"
            :key="field.id"
            class="product-box"
          >
            <div class="box-left">{{ field.expandparamName }}</div>
            <div class="box-right">
              {{ field.expandparamValueName }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="popupList.isCombo === 'YES'">
        <div class="product_title">套装商品</div>
        <div class="product-container">
          <div v-for="(field, index) in popupList.comboItemList" :key="index" class="product-box">
            <div class="box-left">{{ field.goodsName }}</div>
            <div class="box-right">
              {{ `x${field.num}` }}
            </div>
          </div>
        </div>
      </div>
      <!--      <van-field-->
      <!--        class="custom-field"-->
      <!--        label="器械类别"-->
      <!--        type="textarea"-->
      <!--        rows="1"-->
      <!--        autosize-->
      <!--        :model-value="getCategoryText(popupList.apparatusCategory?.apparatusCategoryLevel)"-->
      <!--        disabled-->
      <!--      />-->
      <!--      <van-field-->
      <!--        v-for="field in popupList.goodsExpandparamValueList"-->
      <!--        :key="field.id"-->
      <!--        :label="field.expandparamName"-->
      <!--        :model-value="field.expandparamValueName"-->
      <!--        type="textarea"-->
      <!--        rows="1"-->
      <!--        autosize-->
      <!--        disabled-->
      <!--      />-->
      <div class="custom-button">
        <van-button @click="onSureClick" color="#E89000" round block>确 认</van-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.popup_box {
  width: 100%;

  .product {
    width: 100%;

    .product-container {
      width: 100%;
      padding: 0 16px;

      .product-box {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid #f6f6f6;

        .box-left {
          width: 72px;
          color: #787878;
          font-size: 12px;
          font-weight: 400;
        }

        .box-right {
          width: 250px;
          color: #222222;
          font-size: 12px;
          font-weight: 400;
        }
      }
    }

    .product_title {
      width: 100%;
      height: 42px;
      padding: 0 16px;
      line-height: 42px;
      font-size: 15px;
      font-weight: 600;
      color: #000000;
    }

    :deep(.van-field__label) {
      color: #787878;
    }

    .custom-button {
      width: 100%;
      padding: 0 16px;

      :deep(.van-button) {
        height: 40px;
        margin: 44px 0 37px 0;
        padding: 16px 0;
      }
    }
  }

  .goods_box {
    width: 100%;
    height: 120px;
    padding: 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;

    .right {
      display: flex;
      padding-right: 16px;

      .van-image {
        width: 88px;
        height: 88px;
        margin: 0 8px;
        border-radius: 8px;
      }

      .right_spc {
        display: flex;
        flex-direction: column; /* 主轴为垂直方向，起点在下端 */
        justify-content: space-between;
        width: 219px;
        height: 88px;

        .van-text-ellipsis {
          color: #000000;
          font-size: 14px;
          font-weight: 500;
        }

        .spc_text_bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .spc_title {
            width: 190px;
          }

          .van-text-ellipsis {
            color: #787878;
            font-size: 13px;
            font-weight: 400;
          }
        }

        .right_price {
          margin-top: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .goods_price {
            font-size: 12px;
            color: #e86600;
            font-weight: 400;

            .price_num {
              font-size: 16px;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>
